<style>
   .module-list-all{
       position: fixed;
       bottom: 10px;
       right: 5px;
       width: 480px; 
   }
   .panel-group{
        overflow: auto;
        height: 301px;
   }
</style>
<div ng-include src="'views/sidebar.html'"></div>
<section id="page-wrapper" class="pageDrag" ng-init="init()">
    <br/>
    <div class="page-header clearfix">
        <h1>
        [<span ng-if="info.pageType==0">PC</span><span ng-if="info.pageType==1">H5</span><span ng-if="info.pageType==2">APP</span>]{{info.pageName}}
        <small>{{info.title}}</small>
      </h1>
    </div>
    <div class="row" id="workspace" dnd-list="modules">
        <div class="">
            <div class="alert alert-info clearfix" role="alert">工作区域
                <div class="btn-group pull-right" role="group" aria-label="fn">
                    <button class="btn btn-success" ng-click="save()">
                        <i class="fa fa-floppy-o"></i> 保存
                    </button>
                    <button class="btn btn-default" ng-click="open(info.id)"><i class="fa fa-edit"></i>编辑</button>
                    <button class="btn btn-danger" ng-click="publishData()">
                        <i class="fa fa-paper-plane"></i> 发布
                    </button>
                    <a class="btn btn-info" ng-if="info.pageType==0" href="http://www.tepin.hk/preview/{{info.id}}.html" target="_blank" title="预览"><i class="fa fa-link"></i>预览</a>
                    <a class="btn btn-info" ng-if="info.pageType!=0" href="http://m.tepin.hk/preview/{{info.id}}.html" target="_blank" title="预览"><i class="fa fa-link"></i>预览</a>
                    <button class="btn btn-primary" ng-click="viewOnline()">
                        <i class="fa fa-link"></i> 浏览线上
                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <h2>当前页面模块</h2>
            <p>可拖动排序</p>
            <ul dnd-list="modules" class="list-unstyled" ng-module="modules" style="border: 1px dashed #333;min-height: 55px;">
                <li ng-repeat="module in modules" class="panel panel-warning" dnd-draggable="module" dnd-moved="modules.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="selected = module" ng-class="{'selected': selected === module}">
                    <div class="panel-heading clearfix">
                        <div class="btn-group pull-right" role="group" aria-label="...">
                            <button ng-click="goto('edit', module.moduleName, info.id, module.placeHolder)" class="btn btn-default" title="添加商品">
                                <i class="fa fa-sign-in"></i>
                            </button>
                            <button ng-click="edit(module)" class="btn btn-default">
                                <i class="fa fa-edit"></i>
                            </button>
                            <button class="btn btn-default" clipboard text="module.placeHolder">
                                <i class="fa fa-copy"></i>
                            </button>
                            <button ng-click="remove(module)" class="btn btn-danger">
                                <i class="fa fa-remove"></i>
                            </button>
                        </div>
                        <div class="panel-title">
                            <span>模块描述:{{module.description}}</span>
                        </div>
                        <div class="panel-title">
                            <span ng-if="module.moduleTitle">前台标题:{{module.moduleTitle}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-md-6 module-list-all">
            <h2>所有模块</h2>
            <p>拖动到左边添加，点击标题显示图片缩略图</p>
            <div class="btn-group" role="group" aria-label="fn">
                <form>
                <label ng-repeat="btnName in groupModuleList">
                    <input ng-if="$index == 0" type="radio" name="modelGroup" value="{{btnName}}" ng-click="displayModuleGroup(btnName)" checked/>
                    <input ng-if="$index != 0" type="radio" name="modelGroup" value="{{btnName}}" ng-click="displayModuleGroup(btnName)"/>{{btnName}}</label>
                </form>
                <!-- <button  ng-repeat="btnName in groupModuleList" class="btn btn-success" ng-class="" ng-click="displayModuleGroup(btnName)" tabindex="0">{{btnName}}</button> -->
            </div>
            <accordion close-others="oneAtATime">
                <ul dnd-list="moduleLists" class="list-unstyled module-list">
                    <li ng-repeat="moduleList in moduleLists" class="panel panel-warning" dnd-draggable="moduleList" dnd-effect-allowed="move" dnd-copied="modules.splice($index, 1)" dnd-selected="selected = moduleList" ng-class="{'selected': selected === moduleList}">
                        <accordion-group heading="{{moduleList.description}}">
                            <img ng-src="{{moduleList.picUrl}}" alt="" width="100%" />
                        </accordion-group>
                    </li>
                </ul>
            </accordion>
        </div>
    </div>
</section>
<div ng-include src="'views/page/page.module.edit.html'"></div>
<div ng-include src="'views/page/page.property.edit.html'"></div>
<script>
    function changeWindowSize(){
        setTimeout(function(){
            $(".panel-group").css("height", (document.documentElement.clientHeight-400)+"px");
            $(".module-list-all").css("width", $("#workspace .col-md-6").width()  +"px");
        }, 0);
    }
    
    window.onresize=function(){  
        changeWindowSize();  
    }  

    changeWindowSize();
</script>